<template>
	<view :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">

		<view
			class="tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">

					<view class="tn-flex-1">习惯打卡声音</view>

					<tn-switch @change="changeHabit" v-model="habitStatus" :size="36" activeColor="#18B998"></tn-switch>

				</view>
			</tn-list-cell>
		</view>

		<view
			class="tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">

					<view class="tn-flex-1">目标打卡声音</view>

					<tn-switch @change="changeTarget" v-model="targetStatus" :size="36"
						activeColor="#18B998"></tn-switch>

				</view>
			</tn-list-cell>
		</view>

		<!-- <view
			class="tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">

					<view class="tn-flex-1">通知栏</view>

					<tn-switch @change="changeSwitch" v-model="notice" :size="36" activeColor="#18B998"></tn-switch>

				</view>
			</tn-list-cell>
		</view> -->


		<!-- <view
			class=" tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">

					<view class="tn-flex-1">提醒铃声</view>

					<tn-switch v-model="warnBell" :size="36" activeColor="#18B998"></tn-switch>

				</view>
			</tn-list-cell>
		</view>

		<view
			class=" tn-margin-top-xl1 tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right bg-color-box css-theme"
			:class="[cueTheme]">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" class="css-theme"
				:class="[cueTheme]">
				<view class="tn-flex tn-flex-col-center">

					<view class="tn-flex-1">提醒震动</view>

					<tn-switch v-model="warnShake" :size="36" activeColor="#18B998"></tn-switch>

				</view>
			</tn-list-cell>

		</view> -->


	</view>
</template>

<script>
	var _self
	import push from '@/common/push.js'
	export default {
		data() {
			return {
				notice: true,
				warnBell: true,
				warnShake: true,
				user: [],
				type: 0,
				remindSound: {
					habit: 0,
					target: 0
				},
				habitStatus: false,
				targetStatus: false,
			}
		},
		destroyed() {
			_self.saveData();
		},
		onLoad(options) {
			_self = this;
			var pushStatus = push.isOn()
			if (pushStatus) {
				push.on()
				this.notice = true
			} else {
				this.notice = false
			}
			console.log(pushStatus)

		},
		onShow() {
			try {
				const dataStorage = uni.getStorageSync('remindSound');
				if (dataStorage) {
					_self.remindSound = dataStorage;
					
					if (_self.remindSound.habit == 1) {
						_self.habitStatus = true
					} else {
						_self.habitStatus = false
					}

					if (_self.remindSound.target == 1) {
						_self.targetStatus = true
					} else {
						_self.targetStatus = false
					}
				}
			} catch (e) {
				console.error('获取缓存失败:', e);
			}
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						setTimeout(function() {
							_self.getList()
						}, 200);
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})

		},
		methods: {

			changeHabit(e) {
				if (e) {
					this.remindSound.habit = 1

				} else {
					this.remindSound.habit = 0
				}
				console.log(this.remindSound)
				uni.setStorageSync('remindSound', this.remindSound);
				
			},

			changeTarget(e) {
				if (e) {
					this.remindSound.target = 1

				} else {
					this.remindSound.target = 0
				}
				uni.setStorageSync('remindSound', this.remindSound);
			},
			changeSwitch(e) {
				if (e) {
					push.on()

				} else {
					push.off()
				}
			},
			getList() {
				var data = {
					userId: _self.user.id
				}
				this.$api.listUserSet(data).then((res) => {
					var resData = res;

					if (resData.code == "200") {
						if (resData.data.length > 0) {
							uni.setStorage({
								key: 'sound',
								data: resData.data[0],
								success: function() {}
							});
							console.log(resData.data[0])
							// _self.notice = resData.data[0].notice == 0 ? true : false
							_self.warnShake = resData.data[0].warnShake == 0 ? true : false
							_self.warnBell = resData.data[0].warnBell == 0 ? true : false
						}

					}
				})

			},

			saveData(type, status) {

				var data = {
					userId: _self.user.id,
					notice: _self.notice == true ? 0 : 1,
					warnBell: _self.warnBell == true ? 0 : 1,
					warnShake: _self.warnShake == true ? 0 : 1,
				}

				this.$api.updateUserSet(data).then((res) => {
					console.log(res);
				})

			},

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.bg-color-box {
		background-color: #fff;
		border-radius: 20rpx
	}

	.func_title {
		text-align: center;
		font-weight: bold;
	}

	.template-about {}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	.top_max_box {
		padding-top: 120rpx;
	}

	/* 顶部背景图 end */


	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			// margin: 20rpx 30rpx;
			margin-top: -330rpx;
		}
	}

	/* 页面 end*/

	/* 用户信息 start */
	.user-info {
		&__container {}

		&__avatar {
			width: 170rpx;
			height: 170rpx;
			border: 8rpx solid rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		&__nick-name {
			margin-top: 26rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	}

	/* 用户信息 end */
	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	.user-info__nick-name-top {
		font-weight: bold;
		margin-top: 20rpx;
		font-size: 18px;

	}

	.user-info__nick-name-bottom {
		margin-top: 20rpx;
		color: #A8A8A8;
		font-size: 14px;
		letter-spacing: 10px;
	}

	.tn-margin-top-xl1 {
		margin-top: 20rpx;
	}
</style>